---
export interface Props {
    currentPage: number,
    lastPage: number,
}

const { currentPage, lastPage } = Astro.props;
const pages = Array.from({length: lastPage}, (_, i) => i+1);
---
<div class="note-paginator" data-currentIdx={`${currentPage}`}>
    <p class="tips">页码:</p>
    {
        pages.map((idx) => (
            <a href={`/notes/${idx}`} 
            class={`note-paginator-item ${ currentPage == idx ? 'active' : '' }`}>
                {idx}
            </a>
        ))
    }
</div>

<style lang="scss">
    .note-paginator {
        margin-top: 20px;
        position: relative;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .tips {
            margin-bottom: 8px;
            width: 100%;
            font-size: var(--fontsSM);
            color: var(--textColor3);
        }
        .note-paginator-item {
            margin-right: 10px;
            margin-bottom: 10px;
            width: 24px;
            height: 24px;
            font-size: var(--fontsSM);
            line-height: 24px;
            text-align: center;
            border: 1px solid var(--textColor3);
            color: var(--textColor3);
            &.active {
                border: 1px solid var(--mainColor);
                color: var(--mainColor);
                pointer-events: none;
            }
        }
    }
</style>